<template>
  <div class="micro-component">
    <img :src="config.option.picture" />
    <div class="text">获取配置：{{ config.option }}</div>
    <div class="text">获取数据：{{ config.data }}</div>
    <div class="data"><button class="text" @click="testClickEvent">测试点击事件</button></div>
    <div class="data"><button class="text" @click="subscribeState">订阅状态数据变更: {{ state.aaa }}</button></div>
  </div>
</template>

<script>
export default {
  name: "insight-component-demo",
  data() {
    return {
      state: {},
      message: "大屏组件渲染中"
    }
  },
  beforeCreate() { },
  created() { },
  mounted() { },
  // 新增生命周期，所有大屏组件都渲染完毕后触发
  onload() {
  },
  // 订阅的状态数据变更后触发,用于组件之间的相互联动
  onstate(obj) {
    this.state = obj
  },
  methods: {
    // 测试发送点击事件
    testClickEvent() {
      // this.default.event 声明的事件
      this.$parent.$eventChange("click", {
        value: this.config.data[0].value + (+new Date())
      })
    },
    // 订阅状态数据变更
    subscribeState() {
      // insight其它组件改变状态数据后，会在onState中响应
      this.$parent.$subscribeState(["aaa"])
    }
  },
  beforeDestroy() {
    // TODO: 删除定时器，第三方创建的Dom等……，防止内存泄漏
  },
  props: ["config"],
  // 声明默认配置
  $default: {
    // 初始化组件大小
    style: {
      width: 750,
      height: 700
    },
    // 组件基础配置信息，可渲染成表单在insight右侧让用户自定义，可从 this.config.option 中获取值
    form: [
      {
        key: "picture",
        name: "图片",
        type: "upload",
        default: "./static/demo.jpeg"
      },
      {
        key: "text",
        name: "text",
        type: "text",
        default: "text默认值"
      },
      {
        key: "textarea",
        name: "textarea",
        type: "textarea",
        default: "textarea默认值"
      },
      {
        key: "number",
        name: "number",
        type: "number",
        default: 100,
        min: 10,
        max: 100,
        step: 0.5
      },
      {
        key: "radio",
        name: "radio",
        type: "radio",
        default: 1,
        options: [{
          label: "1",
          value: 1
        }, {
          label: "2",
          value: 2
        }]
      },
      {
        key: "checkbox",
        name: "checkbox",
        type: "checkbox",
        default: [2],
        options: [{
          label: "1",
          value: 1
        }, {
          label: "2",
          value: 2
        }]
      },
      {
        key: "select",
        name: "select",
        type: "select",
        default: "选项1",
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }]
      },
      {
        key: "cascader",
        name: "cascader",
        type: "cascader",
        default: "fankui",
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }],
      },
      {
        key: "switch",
        name: "switch",
        type: "switch",
        default: false
      },
      {
        key: "time",
        name: "time",
        type: "time",
        default: "6:00"
      },
      {
        key: "date",
        name: "date",
        type: "date",
        default: "2021-08-09"
      },
      {
        key: "datetime",
        name: "datetime",
        type: "datetime",
        default: "2021-08-09 6:00"
      },
      {
        key: "color",
        name: "color",
        type: "color",
        default: "red"
      },
    ],
    // 声明默认数据，可从this.config.data 中获取当前最新数据, 默认是数组，因为从数据库查询的数据都是以数组的形式返回
    data: [{ value: "一个标题", name: "ssss" }],
    // 声明默认的事件，以及事件触发时的参数中，对外提供配置，从而绑定全局状态的属性
    event: [{
      name: "click",
      comment: "点击事件",
      binders: [
        { name: "value", comment: "值", prop: "value", state: null },
      ],
    }],
  }
};
</script>

<style lang="scss" scoped>
.micro-component {
  .text {
    font-size: 30px;
    color: red;
    margin: o auto;
    text-align: center;
  }

  img {
    width: 100%;
  }

  .data {
    font-size: 18px;
    color: red;
    margin: o auto;
    text-align: center;
  }
}
</style>
